<!--
 * @Author: yaojian66 1327629137@qq.com
 * @Date: 2022-07-05 14:49:46
 * @LastEditors: yaojian66 1327629137@qq.com
 * @LastEditTime: 2022-07-05 14:52:13
 * @FilePath: \geyao\第一百零九题 切换tab栏目.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>切换tab栏目</title>
</head>
<style>
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .options li {
    float: left;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: solid 1px #ddd;
  }

  .items li {
    width: 405px;
    height: 405px;
    display: none;
    border: solid 1px #ddd;
  }
</style>

<body>
  <ul class='options'>
    <li data-type="0" style='background-color: #25bb9b;'>题库</li>
    <li data-type="1">面试</li>
    <li data-type="2">学习</li>
    <li data-type="3">求职</li>
  </ul>
  <ul class='items'>
    <li style="display: block;">牛客题库，包含编程题、选择题等</li>
    <li>为你的面试提供一站式服务</li>
    <li>校招学习来牛客</li>
    <li>求职中有什么难题，可以联系我们</li>
  </ul>

  <script>
    var options = document.querySelector('.options');
    var optionItems = [].slice.call(document.querySelectorAll('.options li'));
    var items = [].slice.call(document.querySelectorAll('.items li'));
    // 补全代码
    options.onclick = function (e) {
      optionItems.map((item, index) => {
        if (index == e.target.getAttribute('data-type')) {
          item.style.backgroundColor = '#25bb9b';
          items[index].style.display = 'block';
        } else {
          item.style.backgroundColor = '#fff';
          items[index].style.display = 'none';
        }
      })
    }
  </script>
</body>

</html>